前端analysis | What,Why,Who,When,Where,How

《devTool》- angular vscode开发插件看这篇就够了

2020-07-23

前提条件

Angular-cli

开发前提条件,初始化,开发,构建和维护Angular应用程序的命令行界面工具。

安装

1
npm install -g @angular/cli 

创建工程

1
2
3
ng new my-first-project
cd my-first-project
ng serve or ng serve --open

添加 service

1
ng generate service hero //创建service

添加路由

1
2
//模块添加路由
ng generate module app-routing --flat --module=app

创建多模块

1
2
3
4
5
6
7
ng new my-workspace --createApplication="false"
cd my-workspace
ng generate application my-first-app
ng generate application my-second-app
ng generate library my-lib
// 开发人员可以为特定领域创建通用解决方案,以适合在不同应用程序中重复使用。
// 这样的解决方案可以作为Angular 库构建,并且这些库可以作为npm软件包发布和共享。
1
2
3
4
5
6
7
8
9
10
11
12
my-workspace/
... (workspace-wide config files)
projects/ (generated applications and libraries)
my-first-app/ --(an explicitly generated application)
... --(application-specific config)
e2e/ ----(corresponding e2e tests)
src/ ----(e2e tests source)
... ----(e2e-specific config)
src/ --(source and support files for application)
my-lib/ --(a generated library)
... --(library-specific config)
src/ --source and support files for library)

必备插件

1 Nx Console

交互式UI 间接使用Angular cli

2.Angular Language Service

编辑器会自动检测到您正在打开Angular文件。

3.Angular Follow Selector

组件标签定位组件文件;或者样式,定位样式所在文件

4. dev-tool – Augury

介绍

Augury是最常用的开发人员工具扩展,用于调试和分析Google Chrome和Mozilla Firefox浏览器中的Angular应用程序。

功能

Augury通过组件树和可视化调试工具帮助Angular开发人员可视化应用程序。开发人员可以立即洞悉其应用程序结构,变更检测和性能特征。

教程

下方Angury官网有详细教程,这里就不班门弄斧了。

Angury官网

5. TSLint

angular 文件校验

6. Auto Import

code 联想,自动提示导入

7.Angular Snippets (Version 9)

written by the John Papa

ngrx code 生成快捷键,提升coding效率

8.Angular 8 and TypeScript/HTML VS Code Snippets

angular html、service 指令快捷生成

Windows: Select Ctrl+P and then type: ext install angular2-snippets

Mac: Select ⌘+P and then type: ext install angular2-snippets

9. Angular2 Files

ext install vscode-angular2-files

angular组件、service ui界面生成

10. angular2-inline

template 形式下html 高亮

11.angular2-switcher

ts,css,html等同名文件快速切换

ext install angular2-switcher

参考文献

Angular cli

使用支付宝打赏
使用微信打赏

若你觉得我的文章对你有帮助,欢迎点击上方按钮对我打赏